<template>
  <div class="container">
      <top-nav></top-nav>
      <left-nav></left-nav>
      <div class="right-container">
        <right-top-header></right-top-header>
        <div class="right-main-container">
          <router-view></router-view>
        </div>

      </div>

  <loading ref="load"></loading>
  </div>
</template>
<script>
    import leftNav from 'c/com_nav/left_nav'
    import  topNav from 'c/com_nav/top_nav'
    import rightTopHeader from 'c/com_header/right_top_header'
    import loading from 'c/com_loading/loading'
    export default{
        data(){
            return{

            }
        },
        created(){
            store.dialog=this.$message //赋值全局dialog
            if(this.$router.currentRoute&&!this.$router.currentRoute.matched.length) this.$router.push('/main/map')
        },
        mounted(){
            store.loading=this.$refs.load
/*            store.loading.show()*/
            this.getRouterMatch()
        },
        watch:{
            '$route'(val){
               if(val&&val.path){
                   /*清除全局定时器*/
                   clearInterval(store.timer)
/*                   store.loading.show()*/
                   this.getRouterMatch()
               }
            }
        },
        components:{
            leftNav,
            topNav,
            rightTopHeader,
            loading,
        },
        methods:{
            //匹配路由子菜单显示与标题显示
            getRouterMatch(){
                let rid,tits,path
                if(!this.$route.matched||this.$route.matched.length==0) return //没匹配到
                 path=this.$route.matched[0].path //可能有正则表达式匹配的问题
                 if(this.$router.options.routes)
                     this.$router.options.routes.forEach(item=>{
                      if(item.path==path){
                          rid=item.rid
                          return
                      }
                 })
                if(rid){
                    tits=rid.split('-') //获取子菜单数组序号
                    this.$bus.$emit('listen-route-change',tits)
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
  .container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    font-size:16px;
    float:left;
    .right-container{
        position:relative;
        margin-top:60px;
        margin-left:200px;
        background: #F2F4F8;
    }
    .right-main-container{
      position:relative;
      overflow-x:hidden;
    }
  }
</style>